<template>
  <div class="add-menu">
    <el-dialog title="新增菜单" :visible.sync="addMenuSync" :before-close="handleCloseDialog" width="50%">
      <el-card shadow="never">
        <div class="add-menu-body">
          <el-form label-width="100px" :model="addMenuData" ref="addMenuForm" :rules="addMenuRules">
            <el-form-item label="菜单标题:" prop="title">
              <el-input v-model="addMenuData.title" class="add-menu-input" clearable></el-input>
            </el-form-item>
            <el-form-item label="菜单等级：">
              <el-radio v-model="radio" label="1" @change="addMenuData.parent=null;addMenuData.name=null">一级菜单</el-radio>
              <el-radio v-model="radio" label="2" @change="addMenuData.parent=null;addMenuData.name=null">二级菜单</el-radio>
            </el-form-item>
            <el-form-item label="父级菜单：" v-show="radio==='2'">
              <el-select placeholder="请选择父级菜单" @input="handleParentChange" class="add-menu-input"
                         v-model="addMenuData.parent" clearable>
                <el-option v-for="item in ParentMenus" :value="item.id" :label="item.title" :key="item.id">{{
                    item.title
                  }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单名：" prop="name">
              <el-select placeholder="请选择菜单名"
                         class="add-menu-input"
                         :disabled="this.radio==='2'&&addMenuData.parent===null||addMenuData.parent===''"
                         v-model="addMenuData.name">
                <el-option v-for="item in this.LocalMenu" :value="item.name" :key="item.name">{{ item.title }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单路径：" prop="path">
              <el-input v-model="addMenuData.path" class="add-menu-input" clearable></el-input>
            </el-form-item>
            <el-form-item label="菜单图标：" prop="icon">
              <e-icon-picker v-model="addMenuData.icon" :width="222" class="add-menu-input"/>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="dialog-footer">
        <el-button @click="handleCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleAddMenu">确认添加</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import MenuRouter from '@/assets/json/MenuRouter.json'
import { AddMenuApi, GetMenuByIdApi, GetParentMenuApi } from '@/request/menu/menu-api'
import { validateMenuPath } from '@/utils/validate/menu-validate'
import { mapState } from 'vuex'
import store from '@/store'

export default {
  created () {
    this.handleChooseLocalMenu(null)
    this.getParentMenu()
  },
  computed: {
    ...mapState({
      addMenuSync: state => state.MenuEdit.addMenuSync
    })
  },
  data () {
    return {
      sync: true,
      radio: '1',
      LocalMenu: [],
      ParentMenus: [],
      addMenuData: {
        'title': null,
        'parent': null,
        'path': null,
        'icon': null,
        'name': null
      },
      addMenuRules: {
        title: {
          required: true,
          message: '请输入菜单标题',
          trigger: 'blur'
        },
        path: {
          validator: validateMenuPath,
          trigger: 'change'
        },
        icon: {
          required: true,
          message: '请选泽菜单图标',
          trigger: 'blur'
        },
        name: {
          required: true,
          message: '请输入选择菜单名',
          trigger: 'blur'
        },
      }
    }
  },
  methods: {
    handleChooseLocalMenu (parentMenu) {
      if (parentMenu === null) {
        this.LocalMenu = MenuRouter
      } else {
        for (let i = 0; i < MenuRouter.length; i++) {
          if (MenuRouter[i].name === parentMenu) {
            this.LocalMenu = MenuRouter[i].child
          }
        }
      }
    },
    async getParentMenu () {
      let res = await GetParentMenuApi()
      if (res&&
          res.code === 200) {
        this.ParentMenus = res.data
      }
    },
    async handleParentChange () {
      this.addMenuData.name = null
      this.LocalMenu = null
      //取消单项验证
      this.$nextTick(() => {
        this.$refs['addMenuForm'].clearValidate()
      })
      let res = await GetMenuByIdApi(this.addMenuData.parent)
      if (res.code === 200) {
        this.handleChooseLocalMenu(res.data.name)
      }
    },
    close () {
      store.commit('MenuEdit/changeAddMenuSync', false)
      //取消单项验证
      this.$nextTick(() => {
        this.$refs['addMenuForm'].clearValidate()
      })
      this.addMenuData = {
        'title': null,
        'parent': null,
        'path': null,
        'icon': null,
        'name': null
      }
    },
    handleAddMenu () {
      this.$refs.addMenuForm.validate(valid => {
        if (!valid) {
          this.$message.error('存在错误内容，请完善信息！')
          return false
        } else {
          this.$confirm('确定添加该菜单信息吗？', '提示',
              {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
              }).then(async () => {
            let res = await AddMenuApi(this.addMenuData)
            if (res.code === 200) {
              this.$message.success('添加菜单信息成功！')
              // 关闭弹窗
              this.close()
              this.$parent.refreshPage()

            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    handleCloseDialog () {
      this.$confirm('确定取消添加菜单吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
  }
}
</script>
<style scoped lang="less">
.add-menu {
  .el-dialog {
    .el-card {
      width: 70%;
      margin: 0 auto;

      .add-menu-body {
        width: 80%;
        margin: 10px 20px;

        .el-input {
          width: 222px;
        }
      }
    }

    .dialog-footer {
      margin: 0 auto;
      padding: 20px 20px;
      max-width: 200px;
    }
  }
}

/deep/ .el-dialog {
  border-radius: 10px;
}

/deep/ .ui-fas {
  width: 222px;
}
</style>
